<template>
    <div>
        <el-button style="float: left;"  type="primary"  @click="addFormVisible=true">发布新闻</el-button>

        <el-table
                :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)">

            <el-table-column
                    label="编号"
                    prop="id"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="标题"
                    prop="title"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="内容"
                    prop="content"
                    align="center" width="500">
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">

                <template #default="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button type="text" icon="el-icon-delete" style="color: red"
                               @click="handledelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <center>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="data.length"
            >
            </el-pagination>
        </center>

        <el-dialog   v-model="addFormVisible" width="420px" >
            <el-form ref="adddoctorform" :model="addnews" :rules="rules">
                <h3 style="text-align: center">发布新闻</h3>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="addnews.title" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input v-model="addnews.content" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="adddoctorform('adddoctorform')">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="deleteFormVisible" width="420px" >
            <center><h3>确认删除标题为（{{news.title}}）的新闻?<br><br></h3></center>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="deleteFormVisible= false">取 消</el-button>
                    <el-button type="primary" @click="Deletedoctor">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="dialogFormVisible" width="420px" >
            <el-form ref="dialogForm" :model="news" :rules="rules">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="news.title" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input v-model="news.content" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="edit('dialogForm')">确 定</el-button></center>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import axios from "axios";
    import {ElMessage} from "element-plus";

    export default {
        name: "News_Manager",
        data() {

            return {
                data: {
                    content: "",
                    gmtCreate: "",
                    gmtUpdate: "",
                    id: "",
                    title: ""
                },

                data:[],
                currentPage:1, //初始页
                pagesize:8,    //    每页的数据
                dialogFormVisible: false,
                addFormVisible: false,
                deleteFormVisible:false,
                refreshFormVisible:false,
                doctorQuery: {
                    level: '',
                    name: "",
                },
                news: {
                    id: '',
                    titel:'',
                    content:''
                },
                addnews: {
                    id: '',
                    titel:'',
                    content:''
                },
                rules:{
                    title:[
                        {required:true,message:"标题不可为空",trigger:'blur'}
                    ],
                    content:[
                        {required:true,message:"内容不可为空",trigger:'blur'}
                    ],

                },
            }
        },
        activated() {
            this.create();
        },
        methods: {
            create(){
                axios.post("http://119.29.60.153:8001/doctorservice/news-info/getAll").then(resp=> {
                    this.data = resp.data.data.list;
                    this.data.reverse();
                })
            },
            edit( formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/news-info/updateNews",this.news).then(resp=> {

                            if(resp.data.success==true){
                                ElMessage.success("修改成功!");
                                this.dialogFormVisible=false;
                                this.create();
                            }
                            else {
                                ElMessage.error("修改失败!");
                                this.addFormVisible=false;

                            }
                        })
                    }else {
                        return false;
                    }
                })

            },
            adddoctorform( formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/news-info/addNews",this.addnews).then(resp=> {

                            if(resp.data.success==true){
                                alert("成功发布新闻!");
                                location.reload();
                            }
                            else {
                                ElMessage.error("发布失败!");
                                this.addFormVisible=false;

                            }
                        })
                    }else {
                        return false;
                    }
                })

            },

            Deletedoctor(){
                axios.delete("http://119.29.60.153:8001/doctorservice/news-info/deleteNews?id="+this.news.id).then(resp=> {
                    if(resp.data.success==true){
                        ElMessage.success('删除成功');
                        this.deleteFormVisible = false;
                        this.create();
                    }
                    else ElMessage.error('删除失败');
                })
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
            },
            exportdoctors(){
                window.open("http://119.29.60.153:8001/doctorservice/doctor/exportDoctorsInfo");
            },
            handleEdit(index,row){
                this.news= row;
                this.dialogFormVisible = true;
            },
            handledelete(index,row){
                this.news= row;
                this.deleteFormVisible = true;
            }
        },
    }
</script>

<style scoped>
    .red{
        color: red;
    }
</style>